<!doctype html>
<html>
<head>
    <title>Form Builder</title>
    <meta name="description" content="">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="vendor/css/vendor.css"/>
    <link rel="stylesheet" href="dist/formbuilder.css"/>
    <style>
        @font-face {
            font-family: 'fontello';
            src: url('/vendor/fonts/fontello.eot');
            src: url('/vendor/fonts/fontello.eot') format('embedded-opentype'),
            url('/vendor/fonts/fontello.woff') format('woff'),
            url('/vendor/fonts/fontello.ttf') format('truetype'),
            url('/vendor/fonts/fontello.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

    </style>
    <script src="vendor/js/gremlins.js"></script>

</head>
<body>

<div class='fb-main'></div>
<button id="log-payload" class="btn btn-default">Log Payload</button>
<script src="vendor/js/vendor.js"></script>
<script src="bower_components/summernote/dist/summernote.js"></script>
<script src="bower_components/select2/dist/js/select2.min.js"></script>
<script src="dist/formbuilder.js"></script>

<script>
    $(function () {
        Formbuilder.attr('sources', {
            Person: {
                title: 'Employee',
                properties: {'id': 'ID', 'payroll_number': 'Payroll Number'}
            },
            Contractor: {
                title: 'Contractor',
                properties: {'id': 'ID', 'name': 'Name'},
                filters: {
                    status: {
                        name: 'Status',
                        values: {
                            '1': 'Draft',
                            '2': 'In Progress',
                            '3': 'Current',
                            '4': 'Blocked'
                        }
                    }

                }
            }
        });

        Formbuilder.attr('approvers', [
            {id: 1, full_name: 'Luke Skywalker', username: 'lukeskywalker'},
            {id: 2, full_name: 'Leia Organa', username: 'leiaorgana'},
            {id: 3, full_name: 'Darth Vader', username: 'darthvader'},
            {id: 4, full_name: 'Jabba Hutt', username: 'jabbahutt'},
            {id: 5, full_name: 'Lando Calrissian', username: 'landocalrissian'},
            {id: 6, full_name: 'Wedge Antilles', username: 'wedgeantilles'},
            {id: 7, full_name: 'Boba Fett', username: 'bobafett'},
            {id: 8, full_name: 'Emperor Palpatine', username: 'emperorpalpatine'},
            {id: 9, full_name: 'Wilhuff Tarkin', username: 'wilhuftarkin'},
            {id: 10, full_name: 'Han Solo', username: 'hansolo'},
            {id: 11, full_name: 'Jim Green', username: 'jimgreen'}
        ])

        window.fb = new Formbuilder({
            selector: '.fb-main',
            bootstrapData: [
                {
                    "label": "Hours worked",
                    "type": "number",
                    "required": true,
                    "options": {},
                    "parent_uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7",
                    "uuid": "76b257ed-16fa-422d-a732-da6c6170c807"
                },
                {
                    "label": "Pay rate",
                    "type": "number",
                    "required": true,
                    "options": {},
                    "parent_uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7",
                    "uuid": "a720d44f-e4da-4fa5-a7aa-567e82a5fe2a"
                },
                {
                    "label": "Total",
                    "type": "number",
                    "required": true,
                    "options": {},
                    "parent_uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7",
                    "uuid": "c171bdb9-dffb-4bf7-84a9-fd6ae848dd79"
                },
                {
                    "label": "Total Column",
                    "type": "number",
                    "model_only": true,
                    "parent_uuid": "c171bdb9-dffb-4bf7-84a9-fd6ae848dd79",
                    "uuid": "b9a1b61f-fd1a-4df5-b8ba-9bed3aa41d7a",
                    "options": {
                        "calculation_type": "sum(column_uuid_c171bdb9_dffb_4bf7_84a9_fd6ae848dd79)"
                    }
                },
                {
                    "label": "Total Hours Worked",
                    "type": "number",
                    "model_only": true,
                    "parent_uuid": "76b257ed-16fa-422d-a732-da6c6170c807",
                    "uuid": "efc11190-a876-457a-9210-1d2ae8882ff5",
                    "options": {
                        "calculation_type": "sum(column_uuid_76b257ed_16fa_422d_a732_da6c6170c807)"
                    }
                },
                {
                    "type": "table",
                    "label": "Table",
                    "options": {
                        "elements": [{"uuid": "d2ce1858-603a-4e31-8cce-ea51ef08ef13"}, {
                            "uuid": "76b257ed-16fa-422d-a732-da6c6170c807",
                            "totalColumn": true,
                            "totalColumnUuid": 'efc11190-a876-457a-9210-1d2ae8882ff5'
                        }, {"uuid": "a720d44f-e4da-4fa5-a7aa-567e82a5fe2a"}, {
                            "uuid": "c171bdb9-dffb-4bf7-84a9-fd6ae848dd79",
                            "totalColumn": true,
                            "totalColumnUuid": 'b9a1b61f-fd1a-4df5-b8ba-9bed3aa41d7a'
                        }],
                    },
                    "uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7"
                },
                {
                    "type": "datasource",
                    "label": "Work Contractor",
                    "options": {
                        "data_source": 'Contractor',
                        "value_template": 'name',
                        "multiple_selections": true,
                        "is_filtered": true,
                        "filter": "status",
                        "filter_values": [1, 2]

                    },
                    "uuid": "188e4f03-4d5d-4234-9b1f-f916fee48691"
                },
                {
                    "label": "Do you have a website?",
                    "description": "Include 'http://",
                    "type": "website",
                    "required": false,
                    "options": {},
                    "uuid": "31f9a5cf-b54f-40a8-89f0-ccc807f16140"
                },
                {
                    "label": "Security personnel #82?",
                    "reference_id": "id-test",
                    "type": "radio",
                    "answers": [{
                        "uuid": "2b85c25b-8359-403d-a318-4d1e6f34fc75",
                        "label": "Yes",
                        "checked": false
                    }, {
                        "uuid": "74027533-dc7e-43aa-96c6-3f0f2d34d77b",
                        "label": "No",
                        "checked": false
                    }],
                    "options": {},
                    "uuid": "33cfb242-80cd-428a-828e-344cdb5a6f2a"
                },
                {
                    "label": "Medical history",
                    "type": "file",
                    "required": true,
                    "options": {},
                    "uuid": "b7f79a79-8097-404b-9e43-4553d6cf106a"
                },
                {
                    "type": "radio",
                    "answers": [{
                        "uuid": "3693e4db-1235-4fdc-ba15-9d1e80fa0b22",
                        "label": "Yes",
                        "checked": false
                    }, {
                        "uuid": "d45c4e90-1381-4ce1-81a3-8f58de2ceab2",
                        "label": "No",
                        "checked": false
                    }],
                    "options": {
                        "grid": {
                            row: 0,
                            col: 0
                        }
                    },
                    "parent_uuid": '940cb41b-8440-4ff2-b699-a1dfa6cccebb',
                    "uuid": "d96ff75e-07c0-4219-9153-b6aca5704bec"
                },
                {
                    "label": "Grid",
                    "type": "grid",
                    "options": {
                        num_rows: 2,
                        num_cols: 2
                    },
                    "uuid": "940cb41b-8440-4ff2-b699-a1dfa6cccebb"
                },
                {
                    "type": "text",
                    "label": "",
                    "required": true,
                    "options": {
                        "grid": {
                            row: 1,
                            col: 1,
                        }
                    },
                    "parent_uuid": '940cb41b-8440-4ff2-b699-a1dfa6cccebb',
                    "uuid": "3898b16a-8131-461f-bc6b-5d8d85c70903"
                },
                {
                    "type": "radio",
                    "answers": [{
                        "label": "Yes",
                        "checked": false
                    }],
                    "options": {
                        "grid": {
                            row: 0,
                            col: 1
                        }
                    },
                    "parent_uuid": '940cb41b-8440-4ff2-b699-a1dfa6cccebb',
                    "uuid": "097fae5e-90ce-4f4e-bed5-7e86eb86a913"
                },
                {
                    "label": "Employee Name",
                    "type": "text",
                    "required": true,
                    "options": {},
                    "parent_uuid": "909cbdba-4431-4ed8-ab28-96006d356ad7",
                    "uuid": "d2ce1858-603a-4e31-8cce-ea51ef08ef13"
                },
                {
                    "type": "radio",
                    "answers": [{
                        "label": "Yes",
                        "checked": false
                    }],
                    "options": {
                        "grid": {
                            row: 0,
                            col: 1
                        }
                    },
                    "parent_uuid": '940cb41b-8440-4ff2-b699-a1dfa6cccebb',
                    "uuid": "ff9f46f8-bb47-4211-b690-d884285feaf9"
                },
                {
                    "type": "dropdown",
                    "label": "dropdown",
                    "answers": [{
                        "label": "A",
                        "uuid": "e9b6d89f-dcb7-4309-b605-cb461f29710c",
                    },
                        {
                            "label": "B",
                            "uuid": "8db68b97-7a97-47d7-bc01-a5df79bed381",
                        }
                    ],
                },
                {
                    "label": "Approval",
                    "type": 'approval',
                    "options": {
                        approver_type: 1,
                        approver_id: undefined,
                        approver_name: undefined
                    }
                },
                {
                    "label": "Approval by Senior Manager",
                    "type": 'approval',
                    "options": {
                        approver_type: 2,
                        approver_id: 1,
                        approver_name: undefined
                    }
                }

            ]
        });


    });

    $('#log-payload').on('click', function () {
        console.log(fb.getPayload());
    });
</script>

</body>
</html>
